<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <div>
            <span style="float: left;font-weight:600;">指标分组</span>
            <el-button style="float:right" @click="edit" size="mini">新建分类</el-button>
          </div>
          <br><br>
          <hr>
          <div>
            <el-tree :default-expand-all="true" :data="data" :props="defaultProps"
                     @node-click="handleNodeClick"></el-tree>
          </div>
        </div>
      </el-col>

      <el-dialog :before-close="resetType" title="新增分类" :visible.sync="editFlag">
        <el-form :rules="typeRules" ref="typeForm" :model="targetType">
          <el-form-item label="分类名称" prop="label" label-width="100px">
            <el-input v-model="targetType.label" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上级分类" prop="parentId" label-width="100px">
            <el-select v-model="treeData" placeholder="请选择..." style="width: 16rem">
              <el-option :value="treeDataValue" style="height: auto">
                <el-tree v-model="targetType.parentId"
                         ref="tree"
                         default-expand-all
                         accordion
                         node-key="id"
                         :data="data"
                         :props="defaultProps"
                         @node-click="handNodeClick"></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetType">取 消</el-button>
          <el-button type="primary" @click="editTargetType">确 定</el-button>
        </div>
      </el-dialog>

      <!--右侧窗口内容-->
      <el-col :span="20" :xs="24">
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true"
                 v-show="showSearch"
                 label-width="68px">
          <el-form-item>
            <el-input @keyup.enter.native="getTargetList" placeholder="请输入内容" v-model="queryParams.targetLabel">
              <el-button slot="append" icon="el-icon-search" @click="getTargetList"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="editTarget">新建指标</el-button>
          </el-form-item>
        </el-form>

        <el-dialog :before-close="resetForm" title="编辑指标" :visible.sync="editTargetFlag">
          <el-form style="margin-left: 120px" label-position="right" label-width="80px" ref="targetForm"
                   :model="targetForm">
            <el-form-item label="活动名称">

              <el-select v-model="treeData" placeholder="请选择..." style="width: 16rem">
                <el-option :value="treeDataValue" style="height: auto">
                  <el-tree v-model="targetForm.typeId"
                           ref="tree"
                           default-expand-all
                           accordion
                           node-key="id"
                           :data="data"
                           :props="defaultProps"
                           @node-click="handNodeClick"></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指标类型">
              <el-radio v-model="targetForm.targetType" label="业绩指标">业绩指标</el-radio>
              <el-radio v-model="targetForm.targetType" label="行为态度指标">行为态度指标</el-radio>
              <el-radio v-model="targetForm.targetType" label="加分项">加分项</el-radio>
              <el-radio v-model="targetForm.targetType" label="减分项目">减分项目</el-radio>
            </el-form-item>
            <el-form-item label="指标名称">
              <el-input style="width: 300px;" v-model="targetForm.targetLabel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="指标说明">
              <el-input
                type="textarea"
                style="width: 300px;"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="targetForm.targetInfo"/>
            </el-form-item>
            <el-form-item label="考核标准">
              <el-input
                type="textarea"
                style="width: 300px;"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="targetForm.assessCriterion"/>
            </el-form-item>
            <el-form-item label="评分上限">
              <el-input-number :min="1.00" :max="100.00" :controls="false" v-model="targetForm.scoreCeiling"
                               :precision="2">
                <i slot="suffix" class="el-input__icon el-icon-date"></i>
              </el-input-number>
            </el-form-item>
            <el-form-item label="权重">
              <el-input-number :min="1.00" :max="100.00" :controls="false" v-model="targetForm.weight" :precision="2">
                <template>%</template>
              </el-input-number>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                style="width: 300px;"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="targetForm.targetRemark"/>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm()">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>

        <el-table v-loading="loading" :data="targetlibList" @selection-change="handleSelectionChange">
          <el-table-column label="指标名称" align="center" prop="targetLabel"/>
          <el-table-column label="指标类型" align="center" prop="targetType"/>
          <el-table-column label="指标说明" align="center" prop="targetInfo"/>
          <el-table-column label="评分上限" align="center" prop="scoreCeiling">
            <template scope="scope">
              {{ scope.row.scoreCeiling }}
            </template>
          </el-table-column>
          <el-table-column label="权重" align="center" prop="weight">
            <template scope="scope">
              {{ scope.row.weight + '%' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="selectById(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    selectTreeList,
    addTargetType,
    addTarget,
    selectListByType,
    updateTarget,
    selectById,
    deleteTarget
  } from '@/api/system/targetlib'
  import Template from "@/views/system/email/ItoTemplate";

  export default {
    name: "targetlib",
    components: {Template},
    data() {
      return {
        targetForm: {
          id: null,
          typeId: null,
          targetType: null,
          targetLabel: null,
          targetInfo: null,
          assessCriterion: null,
          scoreCeiling: null,
          weight: null,
          targetRemark: null,
          isDelete: null
        },
        radio: "1",
        treeData: '',
        treeDataValue: "",
        targetType: {
          id: undefined,
          label: '',
          parentId: undefined
        },
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        targetlibList: [
          {targetName: '招聘人员'}
        ],
        dateRange: null,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          typeId: 1,
          targetLabel: ''
        },
        total: 0,
        // 显示搜索条件
        showSearch: true,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        editFlag: false,
        editTargetFlag: false,
        typeRules: {
          label: [
            {required: true, message: '请填写类别名称', trigger: 'blur'}
          ],
          parentId: [
            {required: true, message: '请选择上级类别', trigger: 'change'}
          ]
        }
      }
    },
    created() {
      this.getList()
      this.getTargetList()
    },
    methods: {
      convert(list) {
        const res = []
        const map = list.reduce((res, v) => (res[v.id] = v, v.children = [], res), {})
        for (const item of list) {
          if (item.parentId === 0) {
            res.push(item)
            continue
          }
          if (item.parentId in map) {
            const parent = map[item.parentId]
            parent.children = parent.children || []
            parent.children.push(item)
          }
        }
        return res;
      },
      selectById(id) {
        selectById(id).then(res => {
          this.treeData = res.data.label;
          this.targetForm = res.data
        })
        this.editTarget();
      },
      deleteById(id) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTarget(id).then(res => {
            this.getTargetList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      resetForm() {
        this.targetForm =
          {
            id: null,
            typeId: null,
            targetType: null,
            targetLabel: null,
            targetInfo: null,
            assessCriterion: null,
            scoreCeiling: null,
            weight: null,
            targetRemark: null,
            isDelete: null
          }
        this.treeData = ''
        this.treeDataValue = ''
        this.editTargetFlag = false
      },
      resetType() {
        this.editFlag = false;
        this.targetType = {
          id: undefined,
          label: '',
          parentId: undefined
        }
        this.treeDataValue = ''
        this.treeData = ''
      },
      getList() {
        selectTreeList().then(resp => {
          let res = this.convert(resp.data);
          this.data = res
        })
      },
      getTargetList() {
        this.loading = true
        selectListByType(this.queryParams).then(res => {
          this.targetlibList = res.rows
          this.total = res.total
          this.loading = false
        })
      },
      handleNodeClick(data) {
        this.queryParams.typeId = data.id
        this.getTargetList();
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.userId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      renderContent(h, {node, data, store}) {
        return (
          <span><i class={data.icon}></i><span> {node.label}</span></span>)
      },
      edit() {
        this.editFlag = true;
      },
      editTargetType() {
        this.$refs["typeForm"].validate(valid => {
          if (valid) {
            addTargetType(this.targetType).then(res => {
              this.editFlag = false;
              this.getList()
              this.resetType()
              this.$modal.msgSuccess("新增成功");
            })
          }
        })
      },
      editTarget() {
        this.editTargetFlag = true;
      },
      submitForm() {
        this.$refs["targetForm"].validate(valid => {
          if (valid) {
            if (this.targetForm.id != null) {
              updateTarget(this.targetForm).then(res => {
                this.resetForm();
                this.getTargetList();
                this.$modal.msgSuccess("修改成功");
              })
            } else {
              addTarget(this.targetForm).then(res => {
                this.resetForm();
                this.getTargetList();
                this.$modal.msgSuccess("添加成功");
              })
            }
          }
        })
      },
      parentIdChange() {
        this.$nextTick(() => {
          this.$refs.typeForm.validateField('parentId')
        })
      },
      handNodeClick(data, node, nodeData) {
        this.targetType.parentId = data.id
        this.treeDataValue = data
        this.treeData = data.label
        this.targetForm.typeId = data.id
      }
    }
  }
</script>

<style scoped>

</style>
